<template>
	<div class="mainContent">
		<pathTracking :path="Model.path" />
		<div class="container">
			<div class="tabBox">
				<div class="OutofstockSearch">
					<el-row class="rows basic">
						<el-col :sm="12" :md="8" :lg="6">
							<el-input class="input-cont" v-model="Model.writePickingnum" placeholder="请输入领料单号" @blur="checkNumbers"  @keyup.enter.native="checkNumbers"></el-input>
						</el-col>
						<el-col :sm="12" :md="8" :lg="6">
							<div class="items">
								<div class="btn" @click="checkNumbers">确认</div>
							</div>
						</el-col>
					</el-row>
				</div>

				<div>
					<!--出库操作时 -->
					<el-row class="detailTable">
						<div class="detailTableItemTitle">
							<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
							<p class="text">添加实领物料</p>
						</div>
						<div class="OutofstockSearch">
							<el-row class="rows basic">
								<el-col :sm="12" :md="8" :lg="6">
									<el-input class="input-cont" ref="SkuInput" v-model="Model.writeSku" placeholder="请扫码入库/输入SKU" :disabled="Model.writeSkuDisabled"  @keyup.enter.native="checkSku"></el-input>
								</el-col>
								<el-col :sm="12" :md="8" :lg="6">
									<div class="items">
										<div class="btn" @click="checkSku()">确认</div>
									</div>
								</el-col>
							</el-row>
						</div>
						<div class="detailTableDetail">
							<el-table :data="Model.tableDataOut" border style="width: 100%;max-height:550px" @selection-change="handleSelectionChange">
								<el-table-column fixed prop="batchNo" label="领料单号" width="100">
									<template slot-scope="scope">
										{{scope.row.batchNo}}
									</template>
								</el-table-column>
								<el-table-column fixed prop="batchNo" label="条码" width="100">
									<template slot-scope="scope">
										<el-button type="text">{{scope.row.batchNo}}</el-button>
									</template>
								</el-table-column>
								<el-table-column 
									v-for="(item,index) in Model.tableHeaderData2"
									:key="item.prop"
									:prop="item.prop" 
									:label="item.label" 
									:width="item.width" 
								></el-table-column>
							</el-table>
						</div>
					</el-row>	
					<el-row class="bottom">
						<div class="btn_group">
							<div class="btn_item" @click="ToOutofstock">确认出库</div>
							<div class="btn_item cancel">取消</div>
						</div>
					</el-row>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import pathTracking from "@/components/common/pathTracking";
	import pagination from "@/components/common/pagination.vue";
	import {
		getDateString
	} from "@/assets/js/common.js";
	import Model from "./model.js";
	import Controller from "./Controller.js";
	export default {
		name: "purchase",
		mixins: [Model, Controller],
		components: {
			pagination,
			pathTracking
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	@import "./index.less";
</style>
